@import "../library/_variable";
@import "../mixin/_media";
/*
メインナビエリア

画面左に固定表示されます。<br>
デバイスサイズが767px以下になった時、非表示になります。ヘッダーバー内のバーガーメニューを押下することで`.c-mainNavArea`に`.is-active`が付与され表示されます。<br>
<br>
下層メニューの展開はBootstrapにて実装しております。詳細はBootstrapの<a href="https://getbootstrap.com/docs/4.0/components/collapse/" target="_blank">Collapse</a>ページをご確認下さい。

sg-wrapper:
  <script>
    mainNavArea();
  </script>
<sg-wrapper-content/>

Markup:
// `style="position: static; padding-top: 0;"` はスタイルガイドにおけるサンプル表示の都合上付与しています。
+b.c-mainNavArea(style="position: static; padding-top: 0;")
  nav
    +e.UL.nav
      +e.LI.navItem
        +e.A.navItemTitle
          i.fa.fa-home(aria-hidden="true")
          span ホーム
      +e.LI.navItem
        +e.A.navItemTitle.collapsed(data-toggle="collapse" href="#productManagement" aria-expanded="false" aria-controls="productManagement")
          i.fa.fa-cube(aria-hidden="true")
          span 商品管理
        ul.collapse#productManagement
          li: a(href="/moc/product/master") 商品マスタ
          li: a(href="/moc/product/register") 商品登録
          li: a(href="/moc/product/standard") 規格管理
          li: a(href="/moc/product/category") カテゴリ管理
          li: a(href="/moc/product/tags") タグ管理
          li: a(href="/moc/product/csv/product") 商品CSV登録
          li: a(href="/moc/product/csv/category") カテゴリCSV登録
      +e.LI.navItem
        +e.A.navItemTitle.collapsed(data-toggle="collapse" href="#orderManagement" aria-expanded="false" aria-controls="orderManagement")
          i.fa.fa-inbox(aria-hidden="true")
          span 受注管理
        ul.collapse#orderManagement
          li: a(href="/moc/order/master") 受注一覧
          li: a(href="/moc/order/management") 受注管理
      +e.LI.navItem
        +e.A.navItemTitle.collapsed(data-toggle="collapse" href="#shipManagement" aria-expanded="false" aria-controls="shipManagement")
          i.fa.fa-truck(aria-hidden="true")
          span 出荷管理
        ul.collapse#shipManagement
          li: a(href="/moc/shipment/master") 出荷マスター
          li: a(href="/moc/shipment/management") 出荷管理
          li: a(href="/moc/shipment/register") 出荷CSV登録
      +e.LI.navItem
        +e.A.navItemTitle.collapsed(data-toggle="collapse" href="#userManagement" aria-expanded="false" aria-controls="userManagement")
          i.fa.fa-users(aria-hidden="true")
          span 会員管理
        ul.collapse#userManagement
          li: a(href="/moc/customer/master") 会員マスター
          li: a(href="/moc/customer/management") 会員管理
      +e.LI.navItem
        +e.A.navItemTitle.collapsed(data-toggle="collapse" href="#contentsManagement" aria-expanded="false" aria-controls="contentsManagement")
          i.fa.fa-file-text-o(aria-hidden="true")
          span コンテンツ管理
        ul.collapse#contentsManagement
          li: a(href="/moc/content/news") 新着情報管理
          li: a(href="/moc/content/file") ファイル管理
          li: a(href="/moc/content/layout") レイアウト管理
          li: a(href="/moc/content/page") ページ管理
          li: a(href="/moc/content/block") ブロック管理
          li: a(href="/moc/content/cache") キャッシュ管理
      +e.LI.navItem
        +e.A.navItemTitle.collapsed(data-toggle="collapse" href="#config" aria-expanded="false" aria-controls="config")
          i.fa.fa-cog(aria-hidden="true")
          span 設定
        +e.A.navItemSubTitle.collapsed(data-toggle="collapse" href="#commonConfig" aria-expanded="false" aria-controls="commonConfig")
            span 基本情報設定
        ul.collapse#commonConfig
          li: a(href="/moc/setting/basis/shop")  ショップマスター
          li: a(href="/moc/setting/basis/tradelaw")  特定商取引法
          li: a(href="/moc/setting/basis/agreement")  利用規約設定
          li: a(href="/moc/setting/basis/payment")  支払方法設定
          li: a(href="/moc/setting/basis/delivery")  配送方法設定
          li: a(href="/moc/setting/basis/tax")  税率設定
          li: a(href="/moc/setting/basis/mail") メール設定
        +e.A.navItemSubTitle.collapsed(data-toggle="collapse" href="#systemConfig" aria-expanded="false" aria-controls="systemConfig")
          span システム設定
        ul.collapse#systemConfig
          li: a(href="/moc/setting/system/system") システム情報
          li: a(href="/moc/setting/system/member") メンバー管理
          li: a(href="/moc/setting/system/authority") 権限管理
          li: a(href="/moc/setting/system/security") セキュリティ管理
          li: a(href="/moc/setting/system/log") ログ表示
          li: a(href="/moc/setting/system/master") マスターデータ管理
      +e.LI.navItem
        +e.A.navItemTitle.collapsed(data-toggle="collapse" href="#ownersStore" aria-expanded="false" aria-controls="ownersStore")
          i.fa.fa-info-circle(aria-hidden="true")
          span オーナーズストア

Styleguide 3.0
*/

.c-mainNavArea {
  padding-top: 65px;
  width: 220px;
  height: 100%;
  background: #f3f4f6;
  border-right: 1px solid #d6d9e0;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  z-index: 500;
  transition: width 0.3s ease;

  @include media_middle {
    width: 160px;
  }

  @include media_small {
    left: -220px;
    width: 0;
    height: 0;
    opacity: 0;
  }

  ul {
    padding-left: 0;
  }
  &__nav {
    margin-bottom: 0;
    padding-left: 0;
  }
  &__navItem {

    ul {
      background: #fff;
      color: $navy70;
      font-size: 14px;

      @include media_middle {
        font-size: 13px;
      }
    }
    li {
      a {
        display: block;
        padding: 10px 30px 10px 40px;
        text-align: left;
        color: inherit;
        font-size: inherit;
        cursor: pointer;
        @include media_middle {
          padding: 10px 0 10px 25px;
        }
        &:hover {
          text-decoration: none;
          background: $black05;
        }
      }
      a.is-active {
        background: $navy70;
        color: #fff;
      }
      ul li {
        a {
          padding: 10px 30px 10px 50px;

          @include media_middle {
            padding: 10px 0 10px 30px;
          }
        }
      }
    }
  }
  &__navItemTitle {
    transform: translateX(0);
    display: block;
    border-bottom: 1px solid $dllNavy20;
    padding: 10px 15px;
    font-size: 16px;
    color: $navy80;
    cursor: pointer;
    position: relative;
    @include media_middle {
      font-size: 14px;
    }
    &::after {
      display: inline-block;
      width: 16px;
      height: 16px;
      content: "\f106";
      text-align: right;
      font-family: FontAwesome;
      font-size: 20px;
      color: #54687a;
      position: absolute;
      top: 7px;
      right: 15px;
      @include media_middle {
        right: 5px;
      }
    }
    &:hover {
      background: $black05;
      text-decoration: none;
    }
    &.collapsed::after {
      content: "\f107";
    }
    i {
      margin-right: .5em;
      color: $navy70;
      font-size: inherit;
      @include media_middle {
        right: 1px;
      }
    }
    span {
      color: $navy80;
    }
  }

  &__navItem:first-of-type > .c-mainNavArea__navItemTitle::after {
    display: none;
  }
  &__navItemSubTitle {
    display: block;
    background: #fafbfc;
    border-bottom: 1px solid $dllNavy20;
    padding: 10px 35px;
    font-size: 16px;
    color: $navy80;
    cursor: pointer;
    position: relative;
    &:after {
      display: inline-block;
      width: 16px;
      height: 16px;
      content: "\f106";
      text-align: right;
      font-family: FontAwesome;
      font-size: 20px;
      color: #54687a;
      position: absolute;
      top: 7px;
      right: 15px;
      @include media_middle {
        right: 5px;
      }
    }
    &.collapsed::after {
      content: "\f107";
    }
    &:hover {
      text-decoration: none;
    }
    span {
      color: $navy80;
    }
  }
}
.c-mainNavArea.is-active{
  width: 220px;
  height: 100%;
  left: 0;
  opacity: 1;
  transition: left 0.2s 0.2s, opacity 0.1s 0.1s, width 0.1s, height 0.1s;
}


/*
カーテン

デバイスサイズが767px以下時、メインナビエリアが出現した際にナビ以外の操作を抑制するために表示されます。`is-active`が付与されることで表示状態になります。<br>
ナビナビエリアやカーテン部分をクリックした時、デバイスサイズが768pxより上回る時は非表示なります。

Markup:
<!-- imgはスタイルガイドにおけるサンプル表示の都合上記述しています。-->
<div class="c-curtain"></div>
<img src="">

Styleguide 3.1
*/

.c-curtain {
  width: 0;
  height: 0;
  opacity:0;
}

.c-curtain.is-active {
  width: 0;
  height: 0;
  opacity:0;
  transition: opacity 0.3s 0.1s, width 0.1s, height 0.1s;
  @include media_mainNav {
    display: block;
    width: 100%;
    height: 100vh;
    opacity: 1;
    background: rgba(0,0,0,.6);
    z-index: 300;
    position: fixed;
  }
}
